<template>
  <el-dialog title="编辑参数" :visible.sync="dialogVisible" width="30%" :append-to-body="true">
    <el-form ref="editForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="奖品" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="等级" prop="level">
        <el-input v-model="form.level"></el-input>
      </el-form-item>
      <el-form-item label="现金" prop="money">
        <el-input v-model="form.money" type="number"></el-input>
      </el-form-item>
      <el-form-item label="云币" prop="yun_coin">
        <el-input v-model="form.yun_coin" type="number"></el-input>
      </el-form-item>
      <el-form-item label="余额" prop="balance_money">
        <el-input v-model="form.balance_money" type="number"></el-input>
      </el-form-item>
      <el-form-item label="上传图片" prop="note">
        <Upload ref="Upload" :file_ids="form.file_ids" :key="key"></Upload>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="form.note" type="textarea"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('editForm')">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { baseUrl } from "@/config/env";
import Upload from "@/components/busi_system/pic_upload";
const urls = {
  save: baseUrl + "/zweixin/sys/prize/edit",
  get: baseUrl + "/zweixin/sys/prize/get"
};
export default {
  data() {
    return {
      dialogVisible: false,
      key: null,
      form: {
        kid: null,
        name: null,
        level: null,
        note: null,
        money: 0,
        file_ids: null,
        yun_coin: 0,
        balance_money: 0
      },
      rules: {
        name: [{ required: true, message: "请输入奖品名称", trigger: "blur" }],
        level: [{ required: true, message: "请输入奖品等级", trigger: "blur" }],
        money: [
          { required: true, message: "请输入兑换现金数目", trigger: "blur" }
        ],
        yun_coin: [
          { required: true, message: "请输入兑换云币数目", trigger: "blur" }
        ],
        balance_money: [
          { required: true, message: "请输入兑换余额数目", trigger: "blur" }
        ]
      }
    };
  },
  components: { Upload },
  methods: {
    show(kid) {
      this.dialogVisible = true;
      if (this.$refs["editForm"]) {
        this.$refs["editForm"].resetFields();
      }
      this.key = Math.random();
      this.fetch(kid);
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.file_ids = this.$refs.Upload.ids.toString();
          axios.post(urls.save, this.form).then(res => {
            this.$message(res.data.result);
            this.dialogVisible = false;
            this.$emit("refresh");
          });
        }
        return false;
      });
    },
    fetch(kid) {
      axios.get(urls.get, { params: { kid: kid } }).then(res => {
        let data = res.data.result;
        this.form = {
          kid: data.kid,
          name: data.name,
          level: data.level,
          note: data.note,
          money: data.money,
          file_ids: data.file_ids,
          yun_coin: data.yun_coin,
          balance_money: data.balance_money
        };
      });
    }
  }
};
</script>